<template>
  <view class="income-list-page">
    <view class="summary-row">
      <view class="summary-item">
        <text class="label">今日收入</text>
        <text class="value">¥{{ summary.todayIncome }}</text>
      </view>
      <view class="summary-item">
        <text class="label">可提现</text>
        <text class="value">¥{{ summary.withdrawableAmount }}</text>
      </view>
    </view>

    <view class="filter-row">
      <picker mode="selector" :range="statusOptions" :value="statusIndex" @change="onStatusChange">
        <view class="picker">{{ statusOptions[statusIndex] }}</view>
      </picker>
    </view>

    <view class="list">
      <view v-for="item in list" :key="item.id" class="cell">
        <view class="left">
          <text class="title">订单 {{ item.orderId }}</text>
          <text class="time">{{ item.createTime }}</text>
        </view>
        <view class="right">
          <text class="amount">+¥{{ Number(item.amount || 0).toFixed(2) }}</text>
          <text class="status" :class="{ done: item.withdrawStatus === 1 }">{{ item.withdrawStatus === 1 ? '已提现' : '未提现' }}</text>
        </view>
      </view>
      <view class="list-empty" v-if="!loading && list.length === 0">暂无收入记录</view>
      <uni-load-more :status="loadStatus" />
    </view>
  </view>
  
</template>

<script>
import { getIncomeRecords, getIncomeSummary } from '@/api/income'

export default {
  data() {
    return {
      summary: {
        todayIncome: '0.00',
        withdrawableAmount: '0.00'
      },
      statusOptions: ['全部', '未提现', '已提现'],
      statusIndex: 0,
      pageNum: 1,
      pageSize: 20,
      total: 0,
      list: [],
      loading: false,
      loadStatus: 'more'
    }
  },
  onLoad() {
    this.loadSummary()
    this.loadList(true)
  },
  onReachBottom() {
    if (this.list.length < this.total) {
      this.pageNum++
      this.loadList()
    }
  },
  methods: {
    async loadSummary() {
      const res = await getIncomeSummary()
      if (res && res.code === 200 && res.data) {
        this.summary.todayIncome = Number(res.data.todayIncome || 0).toFixed(2)
        this.summary.withdrawableAmount = Number(res.data.withdrawableAmount || 0).toFixed(2)
      }
    },
    onStatusChange(e) {
      this.statusIndex = Number(e.detail.value)
      this.loadList(true)
    },
    async loadList(reset = false) {
      if (this.loading) return
      this.loading = true
      this.loadStatus = 'loading'
      if (reset) {
        this.pageNum = 1
        this.list = []
      }
      const statusMap = { 0: undefined, 1: 0, 2: 1 }
      const res = await getIncomeRecords({
        status: statusMap[this.statusIndex],
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      if (res && res.code === 200 && res.data) {
        this.total = Number(res.data.total || 0)
        const items = res.data.list || []
        this.list = this.list.concat(items)
        this.loadStatus = this.list.length < this.total ? 'more' : 'noMore'
      } else {
        this.loadStatus = 'noMore'
      }
      this.loading = false
    }
  }
}
</script>

<style scoped>
.income-list-page { min-height: 100vh; background: #f5f6f7; }
.summary-row { display:flex; gap:20rpx; padding:24rpx; }
.summary-item { flex:1; background:#fff; border-radius:16rpx; padding:24rpx; }
.label { font-size:24rpx; color:#999; display:block; margin-bottom:8rpx; }
.value { font-size:36rpx; font-weight:700; color:#333; }
.filter-row { padding: 0 24rpx; }
.picker { background:#fff; border-radius:16rpx; padding:20rpx; margin-bottom:12rpx; }
.list { background:#fff; margin: 12rpx 24rpx 24rpx; border-radius:16rpx; padding: 4rpx 0; }
.cell { display:flex; justify-content:space-between; padding:24rpx; border-bottom:1rpx solid #f0f0f0; }
.cell:last-child { border-bottom:none; }
.left { display:flex; flex-direction:column; }
.title { font-size:28rpx; color:#333; margin-bottom:6rpx; }
.time { font-size:24rpx; color:#999; }
.right { display:flex; flex-direction:column; align-items:flex-end; }
.amount { font-size:32rpx; color:#16c26a; font-weight:700; }
.status { font-size:22rpx; color:#ff9f43; }
.status.done { color:#999; }
.list-empty { text-align:center; padding:60rpx 0; color:#999; }
</style>


